import React, { Component } from 'react'

// 创建Context对象
const MyContext = React.createContext()
const { Provider,Consumer } = MyContext

// 类组件
export default class A extends Component {
    state = { name: 'tom' }
    render() {
        return (
            <div>
                <h2>我是A组件</h2>
                <h4>我的用户名是：{this.state.name}</h4>
                <Provider value={{ name: this.state.name, age: '48' }}>
                    <B></B>
                </Provider>
            </div>
        )
    }
}
class B extends Component {
    render() {
        return (
            <div>
                <hr />
                <h2>我是B组件</h2>
                <C></C>
            </div>
        )
    }
}
// class C extends Component {
//     // 声明接收祖组件的数据
//     static contextType = MyContext
//     render() {
//         console.log('this-C', this.context);
//         return (
//             <div>
//                 <hr />
//                 <h2>我是C组件</h2>
//                 <h4>我的用户名是：{this.context.name}---{this.context.age}</h4>
//             </div>
//         )
//     }
// }


// 函数组件
function C() {
    return (
        <div>
            <h2>我是函数式-C组件</h2>
            <h4>我的用户名是：</h4>
            <Consumer>
                {
                    value =>{
                        // console.log(value);
                        return `${value.name},年龄是${value.age}`
                    }
                }
            </Consumer>
        </div>
    )
}
